<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resizables Test Page</title>
<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

<script type="text/javascript" src="../ui.core.js"></script>
<script type="text/javascript" src="../ui.resizable.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>

<script type="text/javascript" src="../effects.core.js"></script>
<script type="text/javascript" src="../effects.bounce.js"></script>
<script type="text/javascript" src="../effects.scale.js"></script>

<link rel="stylesheet" href="../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
<style type="text/css" media="all">

body
{
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

.proxy {
	border: 1px dashed #000/*#3399ff*/;
	/*background-color: #b7d3ef;*/
	/*opacity: 0.3;
	alpha: 0.3;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);*/
}


/*.ui-resizable-handle { position: absolute; background: #D0E3FC; display: none; }
.ui-resizable .ui-resizable-handle { display: block }
.ui-resizable-n { cursor: n-resize; height: 8px; left: 8px; right: 8px; }
.ui-resizable-e { cursor: e-resize; width: 8px; top: 8px; bottom: 8px; }
.ui-resizable-s { cursor: s-resize; height: 8px; left: 8px; right: 8px; }
.ui-resizable-w { cursor: w-resize; width: 8px; top: 8px; bottom: 8px; }

.ui-resizable-se { cursor: se-resize; width: 8px; height: 8px; }
.ui-resizable-sw { cursor: sw-resize; width: 8px; height: 8px; }
.ui-resizable-ne { cursor: ne-resize; width: 8px; height: 8px; }
.ui-resizable-nw { cursor: nw-resize; width: 8px; height: 8px; }
*/

#log {
	right:0px;
	top:0px;
	background-color:#FAFCFE;
	border:1px solid #DFE8F6;
	height:400px;
	width:300px;
	position:absolute;
	overflow:auto;
}

.ui-resizable-knob {
	border: 1px #fff dashed;
}

#normal {
	background-color:#FAFCFE;
	border:1px solid #DFE8F6;
	height:300px;
	width:300px;
	position:absolute;
	top: 200px; left: 200px;
}

#wrapper {
	position:absolute;
	top: 400px; left: 600px;
}

</style>
</head>
<body >

<div id="log">log</div>

<div id="normal">
	Resizable<br>
	<button onclick="$('#normal').resizable().draggable();">Enable</button>
	<button onclick="$('#normal').resizable('destroy');">Destroy</button>
</div>

<img id="wrapper" src="images/bamboo.jpg"> 
<textarea id="wrapperText">Teste</textarea>

<button onclick="$('#wrapper').resizable()">Enable img</button>
<button onclick="$('#wrapper').resizable('destroy');">Destroy img</button>

<script>
	
	$(function() {
		
		
		
	});

</script>
</body>
</html>
